@charset "utf-8";

html, body{
  margin: 0;
  padding:0;
  font-family: 微软雅黑, 黑体, Arial;
}
ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
240 pixels (old Android portrait mode)
320 pixels (iPhone 3 to 5 and iPhone SE portrait mode)
375 pixels (iPhone 6 and 7 portrait)
384 pixels (Android Nexus portrait)
414 pixels (iPhone 6 Plus and 7 Plus portrait)
480 pixels (iPhone 3 and 4 landscape mode)
568 pixels (iPhone 5 landscape)
600 pixels (Android Nexus landscape, Kindle portrait)
667 pixels (iPhone 6 and 7 landscape)
736 pixels (iPhone 6 Plus and 7 Plus landscape)
768 pixels (iPad portrait)
1024 pixels (iPad landscape)
*/
//top, right, bottom, left

$main-color:lightcoral;
$active-color:#c03b44;

#nav {
  position: relative;
  background: $main-color;
  height: 3rem;
  margin: 0 auto;
  z-index: 9;
  .logo-text{
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    margin-left: .5rem;
  }
  .iconfont{
    color: white;
    font-size: 2rem;
  }
  .icon-logo{
    font-size: 2.5rem;
    margin: -.3rem 0 0 .5rem;
    float: left;
  }
  .icon-list{
    display: none;
    float: right;
    margin: 0 .5rem 0 0;
  }
  .navs{
    position: absolute;
    top:0;
    color: white;
    li{
      &.active{
        background: $active-color;
        font-weight: bold;
      }
    }
  }
}
.icons{
  li{
    text-align: center;
    background: white;
    height: 9rem;
    span{
      position: relative;
      color: $main-color;
      font-size: 6rem;
      margin-left: -.5rem;
      &:after{
        content: attr(data-msg);
        position: absolute;
        font-size: 1rem;
        line-height: 25px;
        text-align: center;
        top: calc(100% + 5px);
        padding: .3rem;
        color: white;
        background: lightcoral;
        width: 100%;
        left: 0;
      }
    }
    &.active{
      background: $main-color;
      span{
        position: relative;
        color: white;
        &:after{
          content: attr(data-msg);
          color: $main-color;
          background: white;
          border:1px solid $main-color;
        }
      }
    }
  }
}